Introduction

I am not a programmer.
And the other night I was trying to figure out how to make a div work like an frame. I wanted to be able to edit one HTML file and have it take effect on every page that was set to display that HTML file, but without having to edit the samething on several pages... And like most designers I wanted to stay away from actual frames period.
So I came up with a way to make the DIV call to an external HTML file just like a frame would.
Please note I put this in the CSS/Webdesign section for a reason. Most web designers that don't program won't be looking in the Programming section for webdesign tutorials. Plus the small fact that this isn't here to teach you anything about programming 😉 Just a useful function to incorporate into 'webdesign'.

Before you start Note

Now a quick note, the server you are hosted with must have PHP running as a service on the server. This way it knows how to use the following code. If you host your own server you can download PHP from:

https://www.php.net/

Not too difficult, although I personally prefer just using a host that supports it already to save time. If you have a free host that doesn't support it and want support for it, godaddy.com I believe has a package for about $4.80 a month that gives you several gigs of storage with PHP, ASP support, etc etc.. but we won't really get into that.

The simple PHP code

First off, you need to change the extension of your main document to be a .php instead of .html, this way the server knows you're going to be using PHP code on the page.

Put this code inside the DIV you want to display the external HTML file:

  
        <?php
        include('url-to-your-html-file.html')
        ?>

Very simple and works very well. The external HTML file will still follow the stylesheet of the page its being displayed on.

Your end result

Your end result should be similar to this:

    
       <div id="div-name">
         <?php
         include('url-to-your-html-file.html')
         ?>
       </div>
 

Whats happening in the code above is, the div will size and use the styles you specified in your CSS file. And the PHP include will display the HTML file within those styles and fill the DIV. Now your DIV is, in a round about way functioning as a frame!...well its taking the "concept" from frames of calling to an external file.. but doing it much better. So your DIV is not in fact working as a frame, but the code inside the DIV makes it appear as if it was a frame... without the "casualties" of being a frame!

Quick example

Here you can see an example of how using the include function in PHP can give you the effect of a frame, without having to actually use the Taboo in the CSS/XHTML world "frame set"

Conclusion

I found it very useful in my situation, you might find it useful in a situation where you want to edit the content in one HTML file and have the changes be shown through your whole site where ever a div calls to it. I find that it works good with an announcements/news section that you might want on each page..
Either way there you go! And I hope it can help someone in the future.
Remember you can use this function within many divs and save yourself a ton of work if you make constant updates!
I found that its nice to use this in a nav bar as it gives you the ability to update the menu through-out the entire site by editing one simple(or complex) file.

Thank you! And I would love to hear any feedback.

This page was published on Mar 26, 2008, at 00:45:05 (UTC). It was last revised on Mar 11, 2024, at 19:07:26 (UTC).